<template>
  <el-tabs v-model="zlactiveName">
    <el-tab-pane label="总览" name="zlone">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="zlform" :model="zlform" label-width="100px" class="flex-start ">
              <el-form-item label="网点名称">
                <el-select v-model="zlform.networkNameId" placeholder="请选择网点名称" style="width: 286px">
                  <el-option v-for="item in netlist" :key="item.id" :label="item.networkName" :value="item.networkName" />
                </el-select>
              </el-form-item>
              <el-form-item label="汇总维度">
                <el-select v-model="zlform.collectDimensionality" placeholder="请选择汇总维度" style="width:286px" @change="zlhd">
                  <el-option label="日汇总" value="1" />
                  <el-option label="月汇总" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围" prop="zltime">
                <el-date-picker v-show="zlform.collectDimensionality==='2'" v-model="zlform.month" value-format="yyyy-MM" type="month" placeholder="选择月" style="width: 500px;" />
                <el-date-picker v-show="zlform.collectDimensionality==='1'" v-model="zlform.zlTime" value-format="yyyy-MM-dd" style="width: 500px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="zlpicker" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="zlcx">查询</el-button>
                <elbutton :obj="zlform" @dj="zlclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="zlloading" :data="zltableData" :th="zlth" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="zlform.pageDate.pageNum" :page-size="zlform.pageDate.pageSize" :total="zltotal" @size-change="zlhandleSizeChange" @current-change="zlhandleCurrentChange" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { Getzltable } from '@/api/ReconciliationCenter'
export default {
  data() {
    return {
      netlist: [],
      // 总览内容
      zlactiveName: 'zlone',
      zltotal: 0,
      zlloading: false,
      zlform: {
        collectDimensionality: '1',
        endTime: '',
        month: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: ''
      },
      //   总览表格
      zltableData: [],
      zlth: [],
      zlTime: []
    }
  },
  async created() {
    this.getnetlist()
  },
  methods: {
    // 重置
    zlclear(aaa) {
      this.zlform = aaa
      this.zlform.collectDimensionality = '1'
    },

    // 获取网点名称
    async getnetlist() {
      const res = await getOutletsList()
      this.netlist = res.data
    },
    // 总览查询
    zlcx() {
      if (this.zlform.startTime === '' && this.zlform.month === '') {
        this.$message('请选择日期')
        return
      }
      this.zlonSubmit()
    },
    async zlonSubmit() {
      this.zlloading = true
      const res = await Getzltable(this.zlform)
      this.zlloading = false
      console.log('总览', res)
      if (res.code === 200) {
        this.zltableData = res.data.list.data
        this.zltotal = res.data.list.total
        this.zlth = res.data.fields
      } else {
        this.zlth = []
        this.zltableData = []
        this.zltotal = 0
      }
    },

    // 获取总览时间
    zlpicker(value) {
      if (value == null) {
        this.zlform.startTime = ''
        this.zlform.endTime = ''
        return
      }
      this.zlform.startTime = value[0]
      this.zlform.endTime = value[1]
    },
    // 总览维度改变
    zlhd() {
      this.zlform.month = ''
      this.zlform.startTime = ''
      this.zlform.endTime = ''
      if (this.zlform.zlTime) {
        this.zlform.zlTime = []
      }
    },
    // 总览分页
    zlhandleSizeChange(val) {
      this.zlform.pageDate.pageSize = val
      this.zlform.pageDate.pageNum = 1
      this.zlcx()
    },
    zlhandleCurrentChange(val) {
      this.zlform.pageDate.pageNum = val
      this.zlcx()
    }

  }
}
</script>
<style >
.flex-start {
  display: flex;
}
</style>
